<template>
  <div class="Newsupply">
    <div class="detPgHeader">
      <div class="detPgHeaderleft">
        <span class="side_1"></span>
        <span class="add_1">{{ title }}</span>
      </div>
      <el-button type="info" icon="el-icon-back" onclick="window.history.go(-1)">返回</el-button>
    </div>
    <!--供应商信息-->
    <div class="herd_tow_brgs">
      <div class="herd_tow_bt">供应商信息</div>
      <el-form :model="supplierData" :inline="true" class="demo-form-inline"
               label-width="120px">
        <el-form-item label="供应商编号" prop="number">
          <el-select v-model="supplierData.Suppliernumber" placeholder="请选择" @change="showSupplier()"
                     :disabled="!canedit">
            <el-option
              v-for="item in optionsSupplier"
              :key="item.Id"
              :label="item.enterpriseNumber"
              :value="item.enterpriseNumber">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应商名称" prop="name">
          <el-input disabled v-model="supplierData.name"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="lianxiren">
          <el-input disabled v-model="supplierData.lianxiren"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="tPhone">
          <el-input disabled v-model="supplierData.phone"></el-input>
        </el-form-item>
        <br>
        <el-form-item label="企业地址">
          <el-input disabled v-model="supplierData.address"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <!--合同信息-->
    <div class="herd_tow_brgs">
      <div class="herd_tow_bt">合同信息</div>
      <el-form :model="contractData" :inline="true" class="demo-form-inline"
               label-width="120px">
        <el-form-item label="合同编号" prop="number">
          <el-input v-model="contractData.number" :disabled="!canedit"></el-input>
        </el-form-item>
        <el-form-item label="合同类型" prop="type">
          <el-select v-model="contractData.type" placeholder="请选择" :disabled="!canedit">
            <el-option
              v-for="item in optionsContractType"
              :key="item.value"
              :label="item.msg"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="币别" prop="currency">
          <el-select v-model="contractData.currency" placeholder="请选择" :disabled="!canedit">
            <el-option
              v-for="item in optionsCurrency"
              :key="item.value"
              :label="item.msg"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <br>
        <el-form-item label="生效日期">
          <el-date-picker
            style="width: 202px;"
            v-model="contractData.Take_effect"
            type="date"
            placeholder="选择日期" :disabled="!canedit">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="失效日期">
          <el-date-picker
            v-model="contractData.Invalidation"
            type="date"
            placeholder="选择日期" :disabled="!canedit">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>
    <!--产品价格-->
    <div class="herd_tow_brgs">
      <div class="herd_tow_bt">
        <span style="margin-right: 50px">产品信息</span>
        <el-button v-if="canedit==true" type="primary" size="small" @click="addRow()">新增</el-button>
      </div>

      <el-table
        :header-cell-style="headerStyle"
        :cell-style="cellStyle"
        :data="tableDataProductPrice"
        :height="230"
        :max-height="230"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          align="center"
          label="产品图号"
          prop="tuHao"
          width="180">
          <template v-slot="scope">
            <el-input v-model="scope.row.tuHao"
                      v-bind:disabled="(scope.row.statue==3?true:false||scope.row.statue==4?true:false)||(edits ==1?true:false)"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="产品名称">
          <template v-slot="scope">
            <el-input v-model="scope.row.productName"
                      v-bind:disabled="(scope.row.statue==3?true:false||scope.row.statue==4?true:false)||(edits ==1?true:false)"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="单位">
          <template v-slot="scope">
            <el-input v-model="scope.row.unit"
                      v-bind:disabled="(scope.row.statue==3?true:false||scope.row.statue==4?true:false)||(edits ==1?true:false)"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="价格(元)">
          <template v-slot="scope">
            <el-input v-model="scope.row.price"
                      v-bind:disabled="(scope.row.statue==3?true:false||scope.row.statue==4?true:false)||(edits ==1?true:false)"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          align="center" width="130"
          label="税率">
          <template v-slot="scope">
            <el-input v-model="scope.row.taxRate"
                      v-bind:disabled="(scope.row.statue==3?true:false||scope.row.statue==4?true:false)||(edits ==1?true:false)"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          align="center" width="130"
          label="库存下限">
          <template v-slot="scope">
            <el-input v-model="scope.row.kucunXiaxian"
                      v-bind:disabled="(scope.row.statue==3?true:false||scope.row.statue==4?true:false)||(edits ==1?true:false)"></el-input>
            <!--(scope.row.statue==3?true:false||scope.row.statue==4?true:false) &&  (edits ==1?true:false)-->
          </template>
        </el-table-column>
        <el-table-column
          align="center" width="130"
          label="库存上限">
          <template v-slot="scope">
            <el-input v-model="scope.row.kucunShangxian"
                      v-bind:disabled="(scope.row.statue==3?true:false||scope.row.statue==4?true:false)||(edits ==1?true:false)"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="生效日期">
          <template v-slot="scope">
            <el-date-picker
              v-model="scope.row.shengxiaoTime"
              style="width: 95%"
              type="date"
              placeholder="选择日期"
              v-bind:disabled="(scope.row.statue==3?true:false||scope.row.statue==4?true:false)||(edits ==1?true:false)">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column
          prop="statue" align="center" width="130"
          label="状态" v-if="edits ==1 ">
          <template v-slot="scope">
            <span v-if="scope.row.statue==1">待审核</span>
            <span v-if="scope.row.statue==2">驳回</span>
            <span v-if="scope.row.statue==3">审核通过</span>
            <span v-if="scope.row.statue==4">关闭</span>
<!--            <span v-if="scope.row.statue==5">123</span>-->
            <!--            <el-select v-model="scope.row.statue" placeholder="请选择" v-bind:disabled="(scope.row.statue==4?true:false)||(edits ==1?true:false)"-->
            <!--                       @change="changeProductStatue(scope.row,scope.$index)">-->
            <!--              <el-option-->
            <!--                v-for="item in optionsProductStatue"-->
            <!--                :key="item.value"-->
            <!--                :label="item.msg"-->
            <!--                :value="item.value">-->
            <!--              </el-option>-->
            <!--            </el-select>-->
          </template>
        </el-table-column>
        <el-table-column v-if="canedit==1" align="center" label="操作">
          <template v-slot="scope">
            <!-- <el-button type="primary" size="small" @click="addRow()">新增</el-button>-->
            <el-button

              v-bind:disabled="scope.row.statue==3?true:false||scope.row.statue==4?true:false"
              type="danger"
              icon="el-icon-delete"
              @click="resetForm(scope)"
              size="small"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--bottom 按钮-->
    <div class="from_tab_btn">
      <el-button v-if="canedit==true" @click="ConfirmBts()" type="primary" size="small">确认</el-button>
      <el-button type="info" size="small" onclick="window.history.go(-1)">取消</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {validateNumber, onePoint, validateValidity} from "@/utils/verificaRules"

export default {
  name: "NewContractPurchase",
  components: {},
  data() {
    return {
      edits: 0,
      singleStatue: null,
      type: 0,
      title: "新增采购合同",
      optionsContractType: [
        {value: 0, msg: "长期合作"},
        {value: 1, msg: "短期合作"}
      ],
      optionsStatue: [
        {value: 1, msg: "待审核"},
        {value: 2, msg: "驳回"},
        {value: 3, msg: "已成功"},
        {value: 4, msg: "启用"},
        {value: 5, msg: "终止"},
      ],
      optionsCurrency: [{value: 0, msg: "人民币"}, {value: 1, msg: "美元"}, {value: 2, msg: "其他"}],
      supplierData: {
        Suppliernumber: "", name: "", lianxiren: "", phone: "", address: "",
      },
      //产品价格
      tableDataProductPrice: [],
      optionsSupplier: [],//供应商
      optionsProductStatue: [
        {value: 3, msg: "启用"},
        {value: 4, msg: "关闭"},

      ],
      canedit: true,//是否可以编辑
      rules: {
        price: [{required: true, message: "输入不正确"}, {validator: validateNumber, trigger: 'blur'}]
      },
      contractData: {Take_effect: "", Invalidation: ""},//合同信息
      supplierId: 0,
    };
  },
//监听属性 类似于data概念",
  computed: {},
//监控data中的数据变化",
  watch: {},
//方法集合",
  methods: {
    //关闭产品
    changeProductStatue(data, index) {
      if (data.id == 0) {
        this.tableDataProductPrice[index].statue = null
        return
      }
      axios.get("/JX_java/procurement/caigouhetong/updateCaigouHetong?id=" + data.id + "&&type=" + 2).then(res => {
        console.log(res.data.data)
      })
      this.$notify.info({
        title: '警告',
        message: '这是一项不可逆操作',
        type: 'warning'
      });
    },
    ConfirmBts() {
      if (this.$route.query.id > 0) {
        let message = JSON.parse(localStorage.getItem("message"));
        console.log(this.$route.query.id)
        let data_1 = {
          "clientId": null,
          "clientProducts": null,
          "contractId": this.$route.query.id,
          "supplierProducts": [],
          "userId": message.Id,
          "userName": message.Name
        }
        /*       let param = {
                 "clientId": null,
                 "clientProducts": null,
                 "contractId": this.$route.query.id,
                 "supplierProducts": [],
                 "userId": message.Id,
                 "userName": message.Name
               }*/
        this.tableDataProductPrice.forEach(e => {
          if (e.id == 0) {
            let item = {
              "contractId": null,
              "createonTime": "",
              "danwei": "",
              "id": 0,
              "kucunShangxian": 0,
              "kucunXiaxian": 0,
              "price": 0,
              "productName": "",
              "productTuhao": "",
              "shenghebiaoshi": 0,
              "shenghemessageId": 0,
              "shengxiaoTime": "",
              "shuilv": "",
              "status": 0,
              "supplierId": 0,
              "xuhao": 0
            }
            item.danwei = e.unit
            item.kucunShangxian = e.kucunShangxian
            item.kucunXiaxian = e.kucunXiaxian
            item.price = e.price
            item.productName = e.productName
            item.productTuhao = e.tuHao
            item.shuilv = e.taxRate
            item.shengxiaoTime = e.shengxiaoTime
            item.status = e.status
            item.supplierId = this.supplierId
            data_1.supplierProducts.push(item)
            console.log(e)
          }
        })
        axios.post("/JX_java/procurement/caigouhetong/addCaiGouProducts", data_1).then(res => {
          console.log(res.data.data);
          if (res.data.data == "操作成功") {
            this.$message.success(res.data.data);
            window.history.go(-1);
          } else {
            this.$message.success(res.data.data);
          }
        })
        return
      }
      let parse = JSON.parse(localStorage.getItem("message"));
      let pro = [];
      this.tableDataProductPrice.forEach(e => {
        let proItem = {
          "contractId": 0,
          "createonTime": "",
          "danwei": "",
          "id": 0,
          "kucunShangxian": 0,
          "kucunXiaxian": 0,
          "price": 0,
          "productName": "",
          "productTuhao": "",
          "shenghebiaoshi": 0,
          "shenghemessageId": 0,
          "shuilv": "",
          "status": 0,
          "supplierId": 0,
          "xuhao": 0,
          "shengxiaoTime": ""
        };
        proItem.danwei = e.unit;
        proItem.price = e.price;
        proItem.productName = e.productName;
        proItem.productTuhao = e.tuHao;
        proItem.status = e.status;
        proItem.shengxiaoTime = e.shengxiaoTime;
        proItem.supplierId = this.supplierId;
        proItem.shuilv = e.taxRate;
        proItem.kucunShangxian = e.kucunShangxian
        proItem.kucunXiaxian = e.kucunXiaxian
        pro.push(proItem);
      })
      const data = {
        "bibie": this.contractData.currency,
        "contractNumber": this.contractData.number,
        "createonTime": "",
        "createonUserid": parse.Id,
        "createonUsername": parse.Name,
        "id": 0,
        "leixing": this.contractData.type,
        "products": [],
        "shengHemessageId": 0,
        "shengxiaoTime": this.contractData.Take_effect,
        "shixiaoTime": this.contractData.Invalidation,
        "status": this.contractData.statue,
        "supplierId": this.supplierId,
        "supplierName": this.supplierData.name,
        "tableBiaoshi": 0
      }
      data.products = pro;
      axios.post("/JX_java/procurement/caigouhetong/addCaigouHetong", data).then(res => {
        if (res.data.data == "操作成功") {
          this.$message.success(res.data.data);
          window.history.go(-1);
        } else {
          this.$message.error(res.data.data);
        }
      })
    },
    showSupplier() {
      this.optionsSupplier.forEach(e => {
        if (e.enterpriseNumber == this.supplierData.Suppliernumber) {
          this.supplierData.name = e.enterpriseName
          this.supplierData.lianxiren = e.contacts
          this.supplierData.phone = e.contactsPhone
          this.supplierData.address = e.enterpriseAdress
          this.supplierId = e.id;
        }
      })
    },
    async getOwnSuppers() {
      let s = JSON.parse(localStorage.getItem("message"));
      axios.get("/JX_java/common/getSupperList?udserId=" + s.Id).then(res => {
        this.optionsSupplier = res.data.data;
      })
    },
    // 表头行高与字体
    headerStyle() {
      return {
        'font-size': '14px',
        height: '40px',
        padding: '0'
      }
    },
// 内容行高与字体
    cellStyle() {
      return {
        'font-size': '14px',
        height: '45px',
        padding: '0'
      }
    },
    //动态增加行
    addRow() {
      const list = {
        id: 0,
        tuHao: "",
        statue: null,
      };
      this.tableDataProductPrice.push(list);
    },
    //动态删除行
    resetForm(e) {
      this.tableDataProductPrice.splice(e.$index, 1);
    },
    //详情or编辑
    getData_Detail(id) {
      axios.get("/JX_java/procurement/caigouhetong/getContractDetails?scId=" + id).then(res => {
        console.log(res.data.data, 111111111111)//res.data.supplierId
        const _this = this;
        this.optionsSupplier.forEach(e => {
          if (e.id == res.data.data.supplierId) {
            this.supplierData.name = e.enterpriseName;
            this.supplierData.Suppliernumber = e.enterpriseNumber;
            this.supplierData.lianxiren = e.contacts
            this.supplierData.phone = e.contactsPhone
            this.supplierData.address = e.enterpriseAdress
            this.supplierId = e.id;
            return;
          }
        })
        //合同详情
        this.contractData.number = res.data.data.contractNumber
        this.contractData.type = parseInt(res.data.data.leixing)
        this.contractData.statue = parseInt(res.data.data.status);
        if (this.contractData.statue == 1) {
          this.contractData.statue = "待审核"
        } else if (this.contractData.statue == 2) {
          this.contractData.statue = "驳回"
        } else if (this.contractData.statue) {
          this.contractData.statue = "审核通过"
        }
        this.contractData.currency = parseInt(res.data.data.bibie);
        this.contractData.Take_effect = res.data.data.shengxiaoTime;
        this.contractData.Invalidation = res.data.data.shixiaoTime;
        this.tableDataProductPrice = []
        res.data.data.products.forEach(e => {
          const item = {
            id: 0,
            tuHao: "",
            productName: "",
            unit: "",
            price: 0,
            taxRate: "",
            takeEffectTime: "",
            statue: "",
            kucunShangxian: 0,
            kucunXiaxian: 0
          }
          item.tuHao = e.productTuhao;
          item.productName = e.productName;
          item.unit = e.danwei;
          item.price = e.price;
          item.taxRate = e.shuilv;
          item.kucunXiaxian = e.kucunXiaxian == null ? 0 : e.kucunXiaxian
          item.kucunShangxian = e.kucunShangxian == null ? 0 : e.kucunShangxian
          item.shengxiaoTime = e.shengxiaoTime;
          item.statue = e.status;
          item.id = e.id;
          this.tableDataProductPrice.push(item)
          console.log(this.tableDataProductPrice)
        })
        //产品
      })
    },
  },
//生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {
  },
//生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {
    this.getOwnSuppers();
    this.canedit = (this.$route.query.edit || null) == null;
    let id = this.$route.query.id || null
    if (id != null) {
      console.log(this.canedit, 1111111111111111)
      if (this.canedit == false) {
        this.title = "采购合同详情"
        this.edits = 1
        console.log(this.edits)
      } else {
        this.title = "采购合同编辑"
        this.edits = 1
        console.log(this.edits)
      }

      this.getData_Detail(id)
    }
    console.log(this.canedit, "canedit")
  },
//生命周期 - 挂载之前",html模板未渲染
  beforeMount() {
  },
//生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {

  },
//生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {
  },
//生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {
  },
//生命周期 - 销毁之前",
  beforeDestroy() {
  },
//生命周期 - 销毁完成",
  destroyed() {
  },
//如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {
  },
}
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";

.Newsupply {
  border-top: 1px solid transparent;
  animation: fade-in; /*动画名称*/
  animation-duration: 0.4s; /*动画持续时间*/
  -webkit-animation: fade-in 0.4s; /*针对webkit内核*/
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  /*初始状态 透明度为0*/
  40% {
    opacity: 0;
  }
  /*过渡状态 透明度为0*/
  100% {
    opacity: 1;
  }
  /*结束状态 透明度为1*/
}

@-webkit-keyframes fade-in { /*针对webkit内核*/
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.Newsupply .detPgHeader {
  border: 1px solid transparent;
  box-sizing: border-box;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  margin-bottom: 10px;
}

.Newsupply .detPgHeader .side_1 {
  width: 5px;
  height: 16px;
  background-color: $Header_color;
  display: inline-block;
}

.Newsupply .detPgHeader .add_1 {
  margin-left: 5px;
  font-size: 18px;
  font-weight: 400;
}

.Newsupply .herd_tow_brgs {
  background-color: $white;
  margin: 0 20px 20px;
  overflow: hidden;
  border: 1px solid $bordercolor;
  border-radius: 5px;
}

.Newsupply .herd_tow_bt {
  height: 50px;
  border-bottom: 1px solid $bordercolor;
  margin-bottom: 20px;
  font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.Newsupply .Botm_PtnRpo {
  margin: 20px;
  text-align: center;
  padding: 20px;
  background: white
}

.from_tab_btn {
  text-align: center;
  margin-top: 30px;
}
</style>
